// import React from 'react';
// import ReactDOM from 'react-dom'

// import ReactDOM from 'react-dom/client';
import React from './react';
import ReactDOM from './react/react-dom'
import Counter from "./Counter";
import Counter1 from "./Counter1";
import Counter2 from "./Counter2";
import Counter3 from "./Counter3";
import Counter4 from './Counter4'
import Counter5 from './Counter5'
import Counter6 from './Counter6'
import Counter7 from './Counter7'
import Counter8 from './Counter8'
import Counter9 from './Counter9'
import Counter10 from './Counter10'
import Counter11 from './Counter11'
import Counter12 from './Counter12'
import Counter13 from './Counter13'
import Counter14 from './Counter14'
import Counter15 from "./Counter15";
import Counter16 from "./Counter16";
import Counter17 from './Counter17'
import Counter18 from "./Counter18";
import Counter19 from './Counter19';
import Counter20 from "./Counter20";

//--------------------v18写法--------------
// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(
//   <React.StrictMode>
//     <div>66</div>
//   </React.StrictMode>
// );

//-----------------实现jsx挂载真实dom--------------------
// let ele = <h1 className='name' style={{ color: "red" }}>
//   hello
//   <span>world</span>
// </h1>
// React.createElement(ele)
// ReactDOM.render(ele, document.getElementById('root'))
// React.createElement('h1', {
//   className: 'cls',
//   style: { color: 'red' }
// }, 'hello')

//-----------------------实现 函数组件与class组件--------------------
// const FuncComponent = function (props) {
//   return <h1 className='name' style={{ color: "red" }}>
//     {props.name}
//   </h1>
// }
// // let ele = <FuncComponent name={'ljp'} />
// class ClassComponent extends React.Component {

//   render() {
//     return <h1 className='name' style={{ color: "red" }}>
//       {this.props.name}
//     </h1>
//   }
// }
// let ele = <ClassComponent name={'ljp'} />

// ReactDOM.render(ele, document.getElementById('root'))

//------------------------------实现state 合成事件---------------------------
// ReactDOM.render(<Counter title={'标题'} />, document.getElementById('root'))

//------------------------------实现ref---------------------------
// ReactDOM.render(<Counter1 />, document.getElementById('root'))
// ReactDOM.render(<Counter2 />, document.getElementById('root'))

//------------------------实现 声明周期 简单diff------------------------
// ReactDOM.render(<Counter3 />, document.getElementById('root'))
//------------------------实现 diff react.Fragment------------------------
// ReactDOM.render(<Counter4 />, document.getElementById('root'))

//------------------------实现 新声明周期 ------------------------
// ReactDOM.render(<Counter5 />, document.getElementById('root')) getDerivedStateFromProps
// ReactDOM.render(<Counter6 />, document.getElementById('root')) // getSnapshotBeforeUpdate

//------------------------实现 context ------------------------
// ReactDOM.render(<Counter7 />, document.getElementById('root')) 

//------------------------实现 HOC ------------------------
// ReactDOM.render(<Counter8 />, document.getElementById('root'))  // 装饰器
// ReactDOM.render(<Counter9 />, document.getElementById('root'))  // 反向继承


//------------------------实现 render-props HOC------------------------
// ReactDOM.render(<Counter10 render={(props) => {
//     return <React.Fragment>
//         <h1>鼠标位置跟踪</h1>
//         <p>{props.x}：{props.y}</p>
//     </React.Fragment>
// }} />, document.getElementById('root')) //render-props
// ReactDOM.render(<Counter11 />, document.getElementById('root'))   // HOC

//------------------------实现 性能优化  ------------------------
// ReactDOM.render(<Counter12 />, document.getElementById('root'))   // 实现pureComponent Memo


//------------------------实现 CreatePortal  ------------------------
// ReactDOM.render(<Counter13 />, document.getElementById('root'))


//------------------------实现 useState  ------------------------
// ReactDOM.render(<Counter14 />, document.getElementById('root'))

//------------------------实现 useMemo useCallback  ------------------------
// ReactDOM.render(<Counter15 />, document.getElementById('root'))

//------------------------实现 useReducer  ------------------------
// ReactDOM.render(<Counter16 />, document.getElementById('root'))

//------------------------实现 useContext  ------------------------
// ReactDOM.render(<Counter17 />, document.getElementById('root'))

//------------------------实现 useEffect  ------------------------
// ReactDOM.render(<Counter18 />, document.getElementById('root'))

//------------------------实现 useLayoutEffect useRef ------------------------
// ReactDOM.render(<Counter19 />, document.getElementById('root'))

//------------------------实现 useImperativeHandle  ------------------------
ReactDOM.render(<Counter20 />, document.getElementById('root')) 